<div class="ui-grid ui-grid-pad" style="height:100%">
    <div class="ui-grid-row" style="height:100%">
        <div class="ui-grid-col-2 ui-widget-content border-spe-right">
            <p-tree [value]="menus" selectionMode="single" [loading]="loading" [(selection)]="selectedNode"
                    (onNodeSelect)="nodeSelect()" [filter]="true" filterMode="strict"
                    [style]="{'height': '90%','width':'100%','border-style':'none', 'background':'transparent', 'overflow':'hidden'}">
            </p-tree>
        </div>
        <div class="ui-grid-col-10 ui-widget-content"
             style="height:100%;border:none;padding:0;background-color: white;">
            <div class="button-item border-spe-bottom">
                <button pButton type="text" *ngIf="menu && menu.menuId" class="ui-button-danger" icon="fa fa-trash"
                        (click)="deleteMenu($event)" label="删除"></button>
                <button pButton type="text" *ngIf="menu" class="ui-button-success" icon="fa fa-save"
                        (click)="saveMenu($event)" label="保存"></button>
                <button pButton type="text" class="ui-button-info" icon="fa fa-plus" label="新增操作项"
                        (click)="addMenu()"></button>
                <button pButton type="text" class="ui-button-info" icon="fa fa-plus" (click)="editGroup('add');"
                        label="新增分组"></button>
                <button pButton type="text" class="ui-button-info" icon="fa fa-edit"
                        *ngIf="selectedNode && selectedNode['rootFlag']" (click)="editGroup('edit');" label="编辑分组"></button>
                <button pButton type="text" class="ui-button-danger" icon="fa fa-times"
                        *ngIf="selectedNode && selectedNode['rootFlag']" (click)="deleteGroup('edit');" label="移除分组"></button>
            </div>
            <form *ngIf="menu" [formGroup]="menuForm">
                <div class="container">
                    <div class="ui-g-10">
                        <div class="ui-g-6 form-control-row">
                            <div class="ui-g-4">菜单编号</div>
                            <div class="ui-g-8"><input pInputText formControlName="menuId" type="text"
                                                       style="width:100%" readonly /></div>
                        </div>
                        <div class="ui-g-6 form-control-row">
                            <div class="ui-g-4">显示名称</div>
                            <div class="ui-g-8"><input pInputText formControlName="menuName" type="text"
                                                       style="width:100%" /></div>
                        </div>
                        <div class="ui-g-6 form-control-row">
                            <div class="ui-g-4">请求方式</div>
                            <div class="ui-g-8">
                                <p-dropdown [options]="requestTypes" formControlName="requestType"
                                            [style]="{'width':'100%'}">
                                </p-dropdown>
                            </div>
                        </div>
                        <div class="ui-g-6 form-control-row">
                            <div class="ui-g-4">显示图标</div>
                            <div class="ui-g-8">
                                <p-dropdown [options]="icons" formControlName="menuIcon" [style]="{'width':'100%'}"
                                            filter="true">
                                    <ng-template let-item pTemplate="selectedItem">
                                        <i class="fa {{item.label}}"></i>&nbsp;&nbsp;&nbsp;
                                        <span style="vertical-align:middle">{{item.label}}</span>
                                    </ng-template>
                                    <ng-template let-item pTemplate="item">
                                        <i class="fa {{item.label}}"></i>&nbsp;&nbsp;&nbsp;
                                        <div style="font-size:14px;float:right;margin-top:4px">{{item.label}}</div>
                                    </ng-template>
                                </p-dropdown>
                            </div>
                        </div>
                        <div class="ui-g-12 form-control-row">
                            <div class="ui-g-2">是否选中案卷才显示</div>
                            <div class="ui-g-4">
                                <p-toggleButton onLabel="是" offLabel="否" formControlName="menuActIndepend">
                                </p-toggleButton>
                            </div>
                            <div class="ui-g-2">菜单排序</div>
                            <div class="ui-g-4">
                                <input formControlName="displayOrder" pInputText type="text" style="width:100%" />
                            </div>
                        </div>
                        <div class="ui-g-12 form-control-row">
                            <div class="ui-g-2">菜单样式</div>
                            <div class="ui-g-4">
                                <p-dropdown formControlName="menuClass" [options]="menuClasses"
                                            [style]="{'width':'100%'}">
                                </p-dropdown>
                            </div>
                            <div class="ui-g-2">显示位置</div>
                            <div class="ui-g-4">
                                <p-checkbox [formControl]="menuForm.controls['pozAttr']" name="pozAttr" value="1"
                                            label="待办列表" inputId="todo"></p-checkbox>
                                &nbsp;&nbsp;&nbsp;
                                <p-checkbox [formControl]="menuForm.controls['pozAttr']" name="pozAttr" value="2"
                                            label="详情界面" inputId="detail"></p-checkbox>
                            </div>
                        </div>
                        <div class="ui-g-12 form-control-row">
                            <div class="ui-g-2">打开组件/请求地址</div>
                            <div class="ui-g-10">
                                <input formControlName="requestUrl" pInputText type="text" style="width:100%" />
                            </div>
                        </div>
                        <div class="ui-g-12 form-control-row">
                            <div class="ui-g-2">参数</div>
                            <div class="ui-g-10">
                                <input formControlName="requestParams" pInputText type="text" style="width:100%" />
                            </div>
                        </div>
                        <div class="ui-g-12 form-control-row">
                            <div class="ui-g-2">响应回调</div>
                            <div class="ui-g-4">
                                <p-dropdown formControlName="responseType" [options]="responseTypes"
                                            [style]="{'width':'100%'}">
                                </p-dropdown>
                            </div>
                            <div class="ui-g-2">是否需要确认</div>
                            <div class="ui-g-4">
                                <p-toggleButton onLabel="是" offLabel="否" formControlName="needConfirm"></p-toggleButton>
                            </div>
                        </div>
                        <div class="ui-g-12 form-control-row">
                            <div class="ui-g-2">计算接口</div>
                            <div class="ui-g-10">
                                <input formControlName="calcUrl" pInputText type="text" style="width:100%" />
                            </div>
                        </div>
                        <div class="ui-g-12 form-control-row">
                            <div class="ui-g-2">功能描述</div>
                            <div class="ui-g-10">
                                <textarea formControlName="menuDesc" [rows]="3" style="width:100%;"
                                          pInputTextarea></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<p-confirmDialog #cd>
    <p-footer>
        <button type="button" pButton icon="fa fa-close" label="取消" (click)="cd.reject()"></button>
        <button type="button" pButton icon="fa fa-check" label="确定" (click)="cd.accept()"></button>
    </p-footer>
</p-confirmDialog>
